import type { ItemType } from 'ant-design-vue';

import type { VNode } from 'vue';

import { h } from 'vue';

import {
  AntDesignDel,
  AntDesignEdit,
  AntDesignEllipsisOutlined,
  AntDesignLoading,
} from '@vben/icons';

import { Button, Dropdown, Menu, MenuItem, Tooltip } from 'ant-design-vue';

// 代码生成组件列表
export const ComponentList = [
  { label: '输入框', value: 'Input' },
  { label: '数字输入框', value: 'InputNumber' },
  { label: '密码框', value: 'InputPassword' },
  { label: '文本域', value: 'Textarea' },
  { label: 'ApiSelect', value: 'ApiSelect' },
  { label: 'ApiRadioGroup', value: 'ApiRadioGroup' },
  { label: 'ApiTreeSelect', value: 'ApiTreeSelect' },
  { label: '日期时间选择框', value: 'DateTimePicker' },
  { label: '日期选择框', value: 'DatePicker' },
  { label: '时间选择框', value: 'TimePicker' },
  { label: '图片上传', value: 'SparkUploadImg' },
  { label: '文件上传', value: 'SparkUploadFile' },
  { label: '富文本上传', value: 'SparkEditor' },
];

// 正则校验
export const RegularCodeList = [
  { label: '账号规则', value: 'USERNAME_REGEX', code: '^[a-zA-Z0-9_]+$' },
  {
    label: '密码规则',
    value: 'PASSWORD_REGEX',
    code: String.raw`^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d!@#$%.,;]*$`,
  },
  {
    label: '手机号验证',
    value: 'PHONE_REGEX',
    code: String.raw`^1[3-9]\d{9}$`,
  },
  { label: '邮箱验证', value: 'EMAIL_REGEX' },
];

/**
 * 定义 ModelType 接口，用于描述模型分类
 */
export interface ModelTypeRow {
  id: string;
  name: string;
  code: string;
  sortRank: number;
  remark: string;
  show: number;
  disabled: number;
  createBy: string;
  createTime: string;
  updateBy: string;
  updateTime: string;
}

/**
 * 定义 ModelRow 接口，用于描述模型
 */
export interface ModelRow {
  id: string;
  modelClassifyId: number;
  modelName: string;
  modelCode: string;
  modelCharacter: string;
  modelSyncStatus: number;
  disabled: string;
  createBy: string;
  createTime: string;
  updateBy: string;
  updateTime: string;
}

/**
 * 定义 ModelFieldsRow 接口，用于描述模型字段
 */
export interface ModelFieldsRow {
  id: string;
  fieldName: string;
  fieldAnnotation: string;
  fieldRemark: string;
  fieldType: string;
  fieldLength: number;
  fieldDecimalPoint: number;
  fieldDefaultVal: string;
  fieldPrimaryKey: number;
  fieldNotNull: number;
  fieldUnique: number;
  // 这个是临时的
  isHandle: boolean;
  createBy: string;
  createTime: string;
  updateBy: string;
  updateTime: string;
}

export function getMenuItem(
  label: string | VNode,
  key: string,
  icon?: any,
  children?: ItemType[],
  type?: 'group',
): ItemType {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as ItemType;
}

// 分类自定义操作
export function getTypeHandle(
  label: string | VNode,
  item: string,
  addModelFun: any,
  handleMenuItemClickFun: any,
) {
  // 自定义 label，包含文本和 Dropdown（标签左，图标右）
  return h(
    'div',
    {
      style:
        'display: flex; align-items: center; justify-content: space-between; width: 100%;',
    },
    [
      // 左侧标签
      h('span', {}, label),
      // 右侧操作
      h(
        'div',
        {
          style: 'display: flex; align-items: center;',
        },
        [
          h(
            Button,
            {
              type: 'link',
              size: 'small',
              class: {
                'mr-3': true,
              },
              onClick: async (event) => {
                event.stopPropagation(); // 阻止事件冒泡
                await addModelFun(item);
              },
            },
            () => '模型',
          ),
          h(
            Dropdown,
            {
              trigger: ['hover'],
            },
            {
              // 下拉菜单内容通过 overlay 插槽传递
              overlay: () =>
                h(
                  Menu,
                  {},
                  // 使用函数式声明菜单项
                  () => [
                    h(
                      MenuItem,
                      {
                        key: 'edit',
                        icon: h(AntDesignEdit),
                        onClick: () => handleMenuItemClickFun('edit', item),
                      },
                      () => '编辑',
                    ),
                    h(
                      MenuItem,
                      {
                        key: 'del',
                        icon: h(AntDesignDel),
                        onClick: () => handleMenuItemClickFun('del', item),
                      },
                      () => '删除',
                    ),
                  ],
                ),
              default: () =>
                h(AntDesignEllipsisOutlined, {
                  class: {
                    'mr-2': true,
                  },
                  style: {
                    color: '#000000',
                    cursor: 'pointer',
                    marginLeft: 'auto',
                  },
                }),
            },
          ),
        ],
      ),
    ],
  );
}

// 分类自定义操作: 编辑和删除按钮
export function getTableHandle(
  label: string | VNode,
  child: string,
  syncFun: any,
  editFun: any,
  delFun: any,
) {
  return h(
    'div',
    {
      style:
        'display: flex; align-items: center; justify-content: space-between; width: 100%;',
    },
    [
      // 左侧标签
      h('span', {}, label),
      // 右侧操作
      h(
        'div',
        {
          style: 'display: flex; align-items: center;',
        },
        getTableHandleBtn(child, syncFun, editFun, delFun),
      ),
    ],
  );
}

function getTableHandleBtn(
  child: string,
  syncFun: any,
  editFun: any,
  delFun: any,
) {
  // eslint-disable-next-line unicorn/prefer-ternary
  if (child?.modelSyncStatus === 0) {
    return [
      h(
        Dropdown,
        {
          trigger: ['hover'],
        },
        {
          // 下拉菜单内容通过 overlay 插槽传递
          overlay: () =>
            h(
              Menu,
              {},
              // 使用函数式声明菜单项
              () => [
                h(
                  MenuItem,
                  {
                    key: 'edit',
                    icon: h(AntDesignEdit),
                    onClick: () => editFun(child),
                  },
                  () => '编辑',
                ),
                h(
                  MenuItem,
                  {
                    key: 'del',
                    icon: h(AntDesignDel),
                    onClick: () => delFun(child),
                  },
                  () => '删除',
                ),
              ],
            ),
          default: () =>
            h(AntDesignEllipsisOutlined, {
              class: {
                'mr-2': true,
              },
              style: {
                color: '#000000',
                cursor: 'pointer',
                marginLeft: 'auto',
              },
            }),
        },
      ),
    ];
  } else {
    return [
      h(
        Tooltip,
        {
          class: {
            'mr-3': true,
          },
        },
        {
          title: () => '同步业务模型',
          default: () =>
            h(Button, {
              type: 'primary',
              shape: 'circle',
              size: 'small',
              icon: h(AntDesignLoading),
              onClick: async (event) => {
                event.stopPropagation();
                await syncFun(child);
              },
            }),
        },
      ),
      h(
        Dropdown,
        {
          trigger: ['hover'],
        },
        {
          // 下拉菜单内容通过 overlay 插槽传递
          overlay: () =>
            h(
              Menu,
              {},
              // 使用函数式声明菜单项
              () => [
                h(
                  MenuItem,
                  {
                    key: 'edit',
                    icon: h(AntDesignEdit),
                    onClick: () => editFun(child),
                  },
                  () => '编辑',
                ),
                h(
                  MenuItem,
                  {
                    key: 'del',
                    icon: h(AntDesignDel),
                    onClick: () => delFun(child),
                  },
                  () => '删除',
                ),
              ],
            ),
          default: () =>
            h(AntDesignEllipsisOutlined, {
              class: {
                'mr-2': true,
              },
              style: {
                color: '#000000',
                cursor: 'pointer',
                marginLeft: 'auto',
              },
            }),
        },
      ),
    ];
  }
}
